<script setup lang="ts">
import { ref, toRefs, reactive, watch, } from 'vue'
import { useMessage } from '/@/hooks/web/useMessage';
import { GetAccessableManagerReq, BindManagersToAppReq } from '/@/api/managerAuthorize'

const props = defineProps({
  appId: {
    type: String,
    default: () => '',
  },
  visible: {
    type: Boolean,
    default: () => false,
  }
})
const emit = defineEmits(['success', 'update:visible'])
const { createMessage } = useMessage();
const loading = ref(false);

const { appId, visible } = toRefs(props)

const modalActions = {
  async ok() {
    if (table.selected.length == 0) {
      createMessage({
        message: '请选择人员',
        type: 'warning',
      })
      return;
    };
    loading.value = true;
    const { respCode } = await BindManagersToAppReq({id: appId.value, administratorIds: table.selected.map(e => e.userId)})
    loading.value = false;
    if (respCode == 200){
      visible.value = false;
      emit('success')
      modalActions.close();
    }
  },
  close() {
    emit('update:visible', false)
  }
}

const searchForm = reactive({
  userName: '',
  mobile: '',
  email: '',
})
const searchFormActions = {
  ok() {
    pg.current = 1;
    tableActions.getList();
  }
}

const table = reactive({
  data: [],
  selected: []
})
const tableActions = {
  selectChange(s) {
    table.selected = s;
  },
  async getList() {
    table.data = [];
    loading.value = true;
    const { data, respCode } = await GetAccessableManagerReq({
      clientId: appId.value,
      startIndex: pg.current,
      pageSize: pg.size,
      username: searchForm.userName,
      mobile: searchForm.mobile,
      email: searchForm.email,
    });
    loading.value = false;
    if(respCode == 200) {
      table.data = data.list;
      pg.total = data.total;
    }
  }
}

const pg = reactive({
  current: 1,
  size: 10,
  total: 0,
})
const pgActions = {
  reset() {
    pg.current = 1;
    pg.size = 10;
    pg.total = 0;
  },
  currentChange(c) {
    pg.current = c;
    tableActions.getList();
  }
}

watch(visible, (nv: boolean) => {
  if(nv) {
    table.selected = [];
    tableActions.getList();
  }
})

</script>

<template>
  <el-dialog 
    title="绑定应用"
    :width="1100"
    v-model="visible"
    @close="modalActions.close">
    <div class="bind-app">
      <el-form :label-width="60" inline class="pb-2">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="searchForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFormActions.ok">搜索</el-button>  
        </el-form-item>
      </el-form>
      <el-table :data="table.data" @selection-change="tableActions.selectChange">
        <el-table-column type="selection" fixed="left" width="50"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
      </el-table>
      <el-pagination class="flex justify-end mt-4" background layout="prev, pager, next" :total="pg.total"
        :current-page="pg.current" :page-size="pg.size" @current-change="pgActions.currentChange"></el-pagination>
    </div>
    <template #footer>
      <div class="flex justify-end">
        <el-button @click="modalActions.close">取消</el-button>
        <el-button type="primary" @click="modalActions.ok" :loading="loading" :disabled="table.selected.length == 0">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less">
.bind-app {
  padding: 25px;
}
</style>